<script lang="ts" setup>
import WorkspaceDocument from './document.vue'
import WorkspaceRuntime from './runtime.vue'
import WorkspaceHistory from './history.vue'

const props = defineProps({
  record: {
    type: Object,
    default: () => {
      return {}
    },
  },

})
const { record } = toRefs(props)
const tabList = [
  { key: 'doc', name: '文档' },
  { key: 'run', name: '运行' },
  { key: 'his', name: '历史' },
]

const activeTab = ref(tabList[1])
function handleTab(item: any) {
  activeTab.value = item
}
</script>

<template>
  <section class="h-full w-full">
    <header class="mb-1 h-5 min-h-5 flex items-center px-1 text-sm color-[#30353e]">
      <span class="ml-1.5">接口名称：</span>
      <span class="color-[#216ef2]">{{ record.name }}</span>
    </header>
    <nav class="mb-2.5 h-9 min-h-9 flex items-center border-b-1 border-[#e1e1e1] text-sm">
      <template v-for="(ele, index) in tabList" :key="index">
        <div
          class="relative w-18 flex cursor-pointer items-center justify-center color-[#6e737b] hover:color-[#216ef2]"
          :class="{ 'tab-active': activeTab.key === ele.key }"
          @click="handleTab(ele)"
        >
          <span>{{ ele.name }}</span>
        </div>
      </template>
    </nav>
    <main style="height: calc(100% - 70px);">
      <WorkspaceDocument v-show="activeTab.key === 'doc'" />
      <WorkspaceRuntime v-show="activeTab.key === 'run'" />
      <WorkspaceHistory v-show="activeTab.key === 'his'" />
    </main>
  </section>
</template>

<style lang="scss" scoped>
@use '~/assets/custom.scss';
</style>
